<script setup lang="ts">
import { ESEditor } from "earthsdk-ui";
import { useTemplateRef } from 'vue';

const editorContainer = useTemplateRef('editorContainer')
const editorContainer1 = useTemplateRef('editorContainer1')
const editorContainer2 = useTemplateRef('editorContainer2')

const json = `{
    "type": "div",
    "props": {
        "style": {
            "backgroundColor": "red",
            "width": "100px",
            "height": "100px"
        }
    }
}`

const html = `
<div style="width: 310px; margin-left: 1px;">
<div data-v-aa14c6d6="" class="colorSelect">
<div data-v-aa14c6d6="" class="colorSelect_top">
<div data-v-aa14c6d6="" class="color_text_input">
<input data-v-aa14c6d6="" type="text" class="color_text" value="#4646464C">
</div>
<div data-v-aa14c6d6="" class="color_button">
<div data-v-aa14c6d6="" class="inputPorp" style="background-color: rgba(70, 70, 70, 0.3);">
</div>
</div>
</div>
</div>
</div>
`;

const js = `
const div = document.createElement('div');
const change = (value: string) => {
    console.log('change', value);
    console.log('getValue', JSON.parse(editorContainer.value?.getValue() ?? '{}'));
}
`

const load = () => {
    editorContainer.value?.setVal(json);
}
const load1 = () => {
    editorContainer1.value?.setVal(html);
}
const load2 = () => {
    editorContainer2.value?.setVal(js);
}

const change = (value: string) => {
    console.log('change', value);
    console.log('getValue', editorContainer.value?.getVal() ?? 'getValue');
}
const change1 = (value: string) => {
    console.log('change1', value);
    console.log('getValue1', editorContainer1.value?.getVal() ?? 'getValue1');
}
const change2 = (value: string) => {
    console.log('change2', value);
    console.log('getValue2', editorContainer2.value?.getVal() ?? 'getValue2');
}

</script>

<template>
    <div class="button-box">
        <ESEditor :language="'json'" @load="load" ref="editorContainer" @change="change"></ESEditor>
    </div>
    <div class="button-box">
        <ESEditor :language="'html'" @load="load1" ref="editorContainer1" @change="change1"></ESEditor>
    </div>
    <div class="button-box">
        <ESEditor :language="'js'" @load="load2" ref="editorContainer2" @change="change2"></ESEditor>
    </div>
</template>

<style scoped>
.button-box {
    width: 100%;
    height: 500px;
    margin-top: 20px;
}
</style>
